<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/limits/store/list' }">
        <i class="el-icon-monitor"></i>
        权限管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>提现审核</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content">
      <div style="padding: 20px 40px;">
        <div class="top">
          <!-- 选择日期 -->
          <el-date-picker size="small" @change="dateCh" style="width: 170px;" v-model="date" value-format="yyyy-MM-dd"
            type="date" placeholder="选择日期">
          </el-date-picker>
          <!-- 状态 -->
          <el-select style="width: 100px;" v-model="active" @change="opt" placeholder="状态" size="small">
            <el-option label="申请中" value="申请中"></el-option>
            <el-option label="拒绝" value="拒绝"></el-option>
            <el-option label="成功" value="成功"></el-option>
          </el-select>
          <el-input v-model="search" size="small" style="width: 300px;" placeholder="请输入单号/账号/金额"></el-input>
          <el-button size="small" @click="sear">筛选</el-button>
        </div>
        <table>
          <th>提现单号</th>
          <th>提现门店</th>
          <th>提现账号</th>
          <th>
            <p>提现金额</p>
          </th>
          <th>提现方式</th>
          <th>提现时间</th>
          <th>状态</th>
          <th>操作</th>
          <tr v-for="item in list">
            <td>{{ item.oddnum }}</td>
            <td>{{ item.store }}</td>
            <td>{{ item.name }}</td>
            <td>
              <p>{{ item.amount }}</p>
            </td>
            <td style="text-align: start;width: 200px;">
              <div class="trway">
                <p>银行卡</p>
                <p>姓名:{{ item.name }}</p>
                <p>账号:{{ item.way }}</p>
              </div>
            </td>
            <td>{{ item.date }}</td>
            <td>{{ item.active }}</td>
            <td>
              <el-button type="text" @click="allow(item)">允许</el-button>
              <el-button type="text" @click="reject(item)">拒绝</el-button>
            </td>
          </tr>
        </table>
        <div class="fy">
          <el-pagination background hide-on-single-page @current-change="current" :page-size="size" layout="prev, pager, next"
            :total="list1.length">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
import { getWithBx, setWithBx } from '../../utils/api'
export default {
  data() {
    return {
      list: [],
      list1: [],
      list2: [],
      page: 1,
      date: '',
      active: '',
      search: '',
      size: 3,
    }
  },
  created() {
    this.render()
  },
  methods: {
    // 搜索
    sear() {
      const arr = this.list2.filter(item => {
        if (this.date && this.active && this.search) {
          return this.date == item.date && this.active == item.active && (this.search == item.amount || this.search == item.oddnum || this.search == item.name)
        } else if (this.date && this.active) {
          return this.date == item.date && this.active == item.active
        } else if (this.date && this.search) {
          return this.date == item.date && (this.search == item.amount || this.search == item.oddnum || this.search == item.name)
        } else if (this.active && this.search) {
          return this.active == item.active && (this.search == item.amount || this.search == item.oddnum || this.search == item.name)
        } else if (this.date) {
          return this.date == item.date
        } else if (this.active) {
          return this.active == item.active
        } else if (this.search) {
          return this.search == item.amount || this.search == item.oddnum || this.search == item.name
        }
      })
      if (!this.date && !this.active && !this.search) {
        this.render()
      }
      this.list1 = arr
      this.list = arr
    },
    // 拒绝
    reject(i) {
      if (i.active == '申请中') {
        this.$confirm('确认拒绝该提现请求?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setWithBx({ id: i.id, active: '拒绝' }).then(res => {
            if (res.status == 200) {
              this.render()
              this.$message({
                type: 'success',
                message: '已拒绝!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
    // 允许
    allow(i) {
      if (i.active == '申请中') {
        this.$confirm('确认手动提现完成?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setWithBx({ id: i.id, active: '成功' }).then(res => {
            if (res.status == 200) {
              this.render()
              this.$message({
                type: 'success',
                message: '提现成功!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
    current(i) {
      this.page = i
      this.render()
    },
    render() {
      getWithBx().then(res => {
        console.log(res);
        this.list1 = res.data.data
        this.list = res.data.data.slice((this.page - 1) * this.size, this.page * this.size)
        this.list2 = res.data.data
      })
    },
    // 日期选定
    dateCh() {
      console.log(this.date);
    },
    opt() {
      console.log(this.active);
    }
  }
}
</script>
<style scoped>
.trway {
  padding: 0 20px;
}

.trway p {
  margin-bottom: 10px;
}

.fy {
  float: right;
  margin-top: 40px;
}

.top {
  width: 65%;
  display: flex;
  justify-content: space-between;
}

.content {
  width: 100%;
  height: 100%;
  font-size: 14px;
}

table {
  margin-top: 100px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

tr {
  height: 100px;
}

td {
  border: 1px solid #777777;
}

th {
  height: 80px;
  line-height: 80px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
}
</style>